<!--
* @FileDescription: 顶部工具栏
* @Date: 2022年11月19日 10:59:14
* TODO:
* [] Demo
-->

<template>
	<div>
		<!-- 搜索列表 -->
		<el-form
			v-show="showSearch"
			ref="queryForm"
			:model="queryParams"
			:inline="true"
			label-width="68px"
		>
			<el-form-item :label="serachItem.title" prop="counterName">
				<el-input
					v-model="queryParams[serachItem.key]"
					:placeholder="placeholderText"
					clearable
					size="small"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item :label="$t('calling.timeRange')">
				<el-date-picker
					v-model="queryParams.searchTime"
					clearable
					size="small"
					type="daterange"
					:placeholder="$t('calling.statisticsTimeSelect')"
					:picker-options="pickerOptions"
				/>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
					>{{ $t('elButton.search') }}
				</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{
					$t('elButton.reset')
				}}</el-button>
			</el-form-item>
		</el-form>
		<!-- 按钮栏 -->
		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['queueStat_add']"
					type="primary"
					icon="el-icon-plus"
					size="mini"
					@click="handleAdd"
					>{{ $t('elButton.add') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['queueStat_edit']"
					type="success"
					icon="el-icon-edit"
					size="mini"
					:disabled="single"
					@click="handleEdit"
					>{{ $t('elButton.change') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['queueStat_del']"
					type="danger"
					icon="el-icon-delete"
					size="mini"
					:disabled="multiple"
					@click="handleDel"
					>{{ $t('elButton.delete') }}
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPerm="['queueStat_export']"
					type="warning"
					icon="el-icon-download"
					size="mini"
					@click="handleExport"
					>{{ $t('elButton.export') }}
				</el-button>
			</el-col>
			<div class="top-right-btn">
				<el-tooltip
					class="item"
					effect="dark"
					:content="$t('elButton.refresh')"
					placement="top"
				>
					<el-button
						size="mini"
						circle
						icon="el-icon-refresh"
						@click="handlerRefresh"
					/>
				</el-tooltip>
				<el-tooltip
					class="item"
					effect="dark"
					:content="
						showSearch ? $t('elButton.hideSearch') : $t('elButton.showSearch')
					"
					placement="top"
				>
					<el-button
						size="mini"
						circle
						icon="el-icon-search"
						@click="showSearch = !showSearch"
					/>
				</el-tooltip>
			</div>
		</el-row>
	</div>
</template>

<script>
import dayjs from 'dayjs'
export default {
	name: 'Demo',
	components: {},
	// filters:{},
	// mixins:[],
	props: {
		serachItem: { type: Object, default: {} },
	},
	computed: {
		// 占位文本
		placeholderText() {
			return `请输入${this.serachItem.title}`
		},
	},
	data() {
		return {
			showSearch: true,
			// 查询参数
			queryParams: {
				bizinfoName: undefined,
				searchTime: [],
			},
			// 限制选择的日期最多只能到今天
			pickerOptions: {
				disabledDate: (time) => {
					return time.getTime() > Date.now() - 24 * 60 * 60 * 1000
				},
			},
		}
	},
	created() {
		this.queryParams = {
			current: 1,
			size: 10,
			searchTime:
				this.serachItem.key === 'staffName'
					? ''
					: [new Date().getTime() - 3600 * 1000 * 24 * 30, new Date()],
		}
		this.handleQuery()
	},
	methods: {
		// 搜索
		handleQuery() {
			if (this.queryParams.searchTime) {
				if (this.queryParams.searchTime.length) {
					this.queryParams.beginTime = dayjs(
						this.queryParams.searchTime[0]
					).format('YYYY-MM-DD')
					this.queryParams.endTime = dayjs(
						this.queryParams.searchTime[1]
					).format('YYYY-MM-DD')
				}
			} else {
				delete this.queryParams.beginTime
				delete this.queryParams.endTime
			}
			this.$emit('onSearch', this.queryParams)
		},
		// 导出
		handleExport() {
			this.$emit('export')
		},
		// 刷新
		handlerRefresh() {
			this.$emit('refresh')
		},
		// 重置
		resetQuery() {
			this.queryParams = {
				current: 1,
				size: 10,
				searchTime:
					this.serachItem.key === 'staffName'
						? ''
						: [new Date().getTime() - 3600 * 1000 * 24 * 30, new Date()],
			}
			this.handleQuery()
		},
	},
}
</script>
<style lang="scss" scoped></style>
